---
title: Dragging styles
description: A guide to use Fluid DnD with custom dragging styles.
---

import ListWithDraggingStyles from "@/components/vue/ListWithDraggingStyles.vue";
import { Code } from "@astrojs/starlight/components";

### List of number example

To showing how to use **Fluid DnD** to adding dragging styles.
First, we're going to create a list of numbers setting the name of the `draggingclass`:

export const highlightsListOfNumbers = ['draggingClass','"dragging"'];

export const listOfNumbers = `<script setup lang="ts">
import { ref } from "vue";
import { useDragAndDrop } from "fluid-dnd/vue";

const list = ref([1, 2, 3]);
const [ parent ] = useDragAndDrop(list,{
draggingClass: "dragging",
});

</script>`;

<Code code={listOfNumbers} lang="vue" mark={highlightsListOfNumbers} />

### Creating the view

Next, create the list of number on vue template and the class selector for `dragging`:

export const highlights = ['dragging'];

export const listOfNumbersHTML = `
<template>
  <ul ref="parent" class="block px-6 p-8">
    <li
      class="number border-solid mt-1 pl-1 border-2"
      v-for="(element, index) in list"
      :index="index"
    >
      {{ element }}
    </li>
  </ul>
</template>

<style>
/*....*/
.dragging {
  transition: background-color color 150ms ease-in, color 150ms ease-in;
  background-color: var(--sl-color-gray-1);
  color: black;
}
</style>

`;

<Code code={listOfNumbersHTML} mark={highlights} lang="vue" />

### Preview

<div class="pl-8">
  <ListWithDraggingStyles client:load />
</div>
